<%--
  Created by IntelliJ IDEA.
  User: TZZ
  Date: 2020/5/15
  Time: 17:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="t" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <%@include file="/bootstrap.jsp" %>
    <style type="text/css">
        .cz button {
            margin: 10px 20px;
        }

        .sub {
            border: 1px solid red;
        }
    </style>
    <%--<link rel="stylesheet" href="${pageContext.request.contextPath}/user.css">--%>
</head>
<body>
<div class="cz bg-info">
    <button type="botton" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加员工</button>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="container">
                <form action="${pageContext.request.contextPath}/UserAddServlet.filter" method="post"
                      onsubmit="return sub()">

                    <h4 class="modal-title" id="myModalLabel">添加员工信息</h4>

                    <div class="input-group mb-3" style="margin-top: 20px">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-fw fa-user"></i>姓名</span>
                        </div>
                        <input type="text" name="u_name" class="form-control" placeholder="姓名">
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-fw fa-paste"></i>密码</span>
                        </div>
                        <input type="password" name="u_pwd" class="form-control" placeholder="密码">
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-fw fa-s15"></i>年龄</span>
                        </div>
                        <input type="number" name="u_age" class="form-control" placeholder="年龄">
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-fw fa-s15"></i>性别</span>
                        </div>
                        <div class="form-control">
                            <input type="radio" name="u_sex" value="男">男
                            <input type="radio" name="u_sex" value="女">女
                        </div>
                    </div>

                    <div style="margin-left: 180px">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交添加</button>
                    </div>

                </form>
                <script>
                    function sub() {
                        var u_name = $("input[name='u_name']").val();
                        var u_pwd = $("input[name='u_pwd']").val();
                        if (u_name.length == 0) {
                            $("input[name='u_name']").attr("placeholder", "用户名不能为空");
                            $("input[name='u_name']").addClass("sub");
                            return false;
                        }
                        if (u_pwd.length == 0) {
                            $("input[name='u_pwd']").attr("placeholder", "密码不能为空");
                            $("input[name='u_pwd']").addClass("sub");
                            return false;
                        }
                        return true;
                    }
                </script>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<table class="table-hover table-striped table-bordered table">
    <thead class="table-dark">
    <tr>
        <td>工号</td>
        <td>姓名</td>
        <td>密码</td>
        <td>年龄</td>
        <td>性别</td>
        <td>入职时间</td>
        <td>信息更新时间</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <t:forEach items="${userList}" var="user">
        <tr>
            <td>${user.u_id}</td>
            <td>${user.u_name}</td>
            <td>${user.u_pwd}</td>
            <td>${user.u_age}</td>
            <td>${user.u_sex}</td>
            <td>${user.userAdd}</td>
            <td>${user.userUpdate}</td>
            <td>
                <a type="button" class="btn btn-danger" onclick="deleteUser('${user.u_id}')"
                   style="color: white;text-decoration: none">辞退员工</a>
                <a class="btn btn-info" type="button" data-toggle="modal" data-target="#updateModal"
                   style="color: white;text-decoration: none"
                   onclick="updateUser('${user.u_id}','${user.u_name}','${user.u_pwd}','${user.u_age}','${user.u_sex}')">
                    修改信息
                </a>
            </td>

        </tr>
    </t:forEach>
    </tbody>
</table>

<!-- 修改模态框（Modal） -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div style="padding: 10px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <form class="bs-example bs-example-form" role="form" method="post"
                      action="${pageContext.request.contextPath}/UserUpdateServlet.filter">
                    <%--用户编号--%>
                    <div class="form-group">
                        <label for="updateId">用户编号:</label>
                        <input type="text" class="form-control" placeholder="用户编号" id="updateId" name="u_id" value="">
                    </div>
                    <%--用户姓名--%>
                    <div class="form-group">
                        <label for="updateName">用户姓名:</label>
                        <input type="text" class="form-control" placeholder="用户姓名" id="updateName" name="u_name"
                               value="">
                    </div>
                    <br>
                    <%--用户密码--%>
                    <div class="form-group">
                        <label for="updatePassword">用户密码:</label>
                        <input type="text" class="form-control" placeholder="用户密码" id="updatePassword" name="u_pwd"
                               value="">
                    </div>
                    <%--用户年龄--%>
                    <div class="form-group">
                        <label for="updateAge">用户年龄:</label>
                        <input type="text" class="form-control" placeholder="用户年龄" id="updateAge" name="u_age" value="">
                    </div>
                    <br>
                    <%--用户性别--%>
                    <div class="form-group">
                        <label for="updateSex">用户性别:</label>
                        <input type="text" class="form-control" placeholder="用户性别" id="updateSex" name="u_sex" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="submit" class="btn btn-primary">
                            提交
                        </button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script type="text/javascript">
    function updateUser(u_id, u_name, u_pwd, u_age, u_sex) {
        document.getElementById("updateId").value = u_id;
        document.getElementById("updateName").value = u_name;
        document.getElementById("updatePassword").value = u_pwd;
        document.getElementById("updateAge").value = u_age;
        document.getElementById("updateSex").value = u_sex;
    }

    function deleteUser(u_id) {
        var con = confirm("是否删除?");
        if (con == true) {
            location.href = "${pageContext.request.contextPath}/UserDeleteServlet.filter?u_id=" + u_id;
        }
    }
</script>
</body>
</html>
